<template>
  <!-- 带多选框的单元格 -->
  <van-cell @click="clickCell" :is-link="isLink" :center="center">
    <template #title>
      <slot name="title">{{ $attrs.title }}</slot>
    </template>
    <template v-slot:[dynamicslotname] v-if="position">
      <van-checkbox
        :class="{ 'hu-checkCell--square': shape == 'square' }"
        :style="changStyle"
        v-bind="$attrs"
        :shape="shape"
        v-model="checked"
      />
    </template>
    <template #default>
      <slot name="value"></slot>
    </template>
  </van-cell>
</template>

<script>
export default {
  name: "HuCheckCell",
  model: {
    props: "value",
    event: "update",
  },
  props: {
    // 多选框值
    value: {
      type: Boolean,
      default: false,
    },
    // 多选框位置 left-左边 right-右边
    position: {
      type: String,
      default: "left",
    },
    // 形状，可选值 round（圆形）
    shape: {
      type: String,
      default: "square",
    },
    // 右箭头
    isLink: {
      type: Boolean,
      default: false,
    },
    center: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    // 插槽名称
    dynamicslotname() {
      return {
        left: "icon",
        right: "right-icon",
      }[this.position];
    },
    // 选框样式
    changStyle() {
      return {
        left: { marginRight: "13px" },
        right: { marginLeft: "13px" },
      }[this.position];
    },
  },
  data() {
    return {
      checked: false,
    };
  },
  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.checked = newValue;
      },
    },
  },
  methods: {
    // 点击单元格
    clickCell() {
      if (this.$attrs.disabled) {
        return;
      }
      this.checked = !this.checked;
      this.$emit("update", this.checked);
      this.$emit("clickCell", this.checked);
    },
  },
};
</script>

<style lang="scss" >
.Fg-phone {
  .hu-checkCell--square {
    .van-checkbox__icon .van-icon {
      border-radius: 3px;
    }
  }
}
</style>
